<template>
  <div class="check-reivew-page">
    <abstract-table-page
      ref="pager"
      :fetcher="fetcher"
      :phone-columns="columns.phone"
      :pc-columns="columns.pc"
      @click-row="clickRow"
    >
      <template #default="{ row }">
        <td class="is-center field-no-padding">{{ row.question_id }}</td>
        <td class="is-center field-low-padding">{{ row.commenter.realname }}</td>
        <td class="text-one-line">{{ row.content }}</td>
        <td class="is-center field-low-padding">
          <mu-badge v-if="row.is_rechecked" color="success" content="已处理"></mu-badge>
          <mu-badge v-else color="error" content="未处理"></mu-badge>
        </td>
        <td class="is-center field-low-padding field-actions">
          <mu-button color="primary" small @click="showQuestion(row)">查看题目</mu-button>
          <mu-button color="primary" small @click="showCheck(row)">查看审核</mu-button>
          <mu-button color="success" small @click="handleReview(row)">{{ row.is_rechecked ? '设为未处理' : '设为已处理' }}</mu-button>
        </td>
      </template>
    </abstract-table-page>
  </div>
</template>

<script>
import AbstractTablePage from './AbstractTablePage'
import api from '@/api'

export default {
  name: 'CheckReviewPage',
  components: {
    AbstractTablePage
  },
  props: {
    fetcher: {
      type: Function,
      required: true
    }
  },
  data() {
    return {
      columns: {
        phone: [
          { title: '题目ID', width: 60, name: 'question_id', align: 'center' },
          { title: '留言者', width: 100, name: 'commenter', align: 'center' },
          { title: '留言内容', width: 200, name: 'content', align: 'center' },
          { title: '处理结果', width: 100, name: 'is_rechecked', align: 'center' },
          { title: '操作', width: 300, name: 'actions', align: 'center' }
        ],
        pc: [
          { title: '题目ID', width: 60, name: 'question_id', class: 'field-no-padding', align: 'center' },
          { title: '留言者', width: 100, name: 'commenter', align: 'center' },
          { title: '留言内容', name: 'content', align: 'center' },
          { title: '处理结果', width: 100, name: 'is_rechecked', align: 'center' },
          { title: '操作', width: 300, name: 'actions', align: 'center' }
        ]
      }
    }
  },
  methods: {
    // 刷新
    refresh() {
      this.$refs.pager.refresh()
    },
    // 选中某一行
    clickRow(row) {
      this.$emit('click-row', row)
    },
    // 查看题目
    showQuestion({ question_id }) {
      this.$router.push({
        name: 'question-show',
        params: {
          id: question_id
        }
      })
    },
    // 查看审核
    showCheck({ question_id }) {
      this.$router.push({
        name: 'check-question',
        params: {
          id: question_id
        }
      })
    },
    // 处理留言
    async handleReview({ id, is_rechecked }) {
      try {
        await api.editRecheckCommentMessage(id, !is_rechecked)
        this.refresh()
        this.$toast.success('已将处理结果改为' + (is_rechecked ? '未处理' : '已处理'))
      } catch (err) {
        this.$apiCatch(err)
      }
    }
  }
}
</script>

<style scoped>
.field-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
